<script lang="ts" setup>
import { ref,onUnmounted,onMounted ,computed } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useUserStore } from '../stores/user';

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
// localStorage.getItem()
const active = ref(0)

console.log(route);

//根据路由的path来判断当前页面的active值  计算属性监听路由的变化 在这外面监听路由变化  在onmounted中初始化active值
const activeIndex = computed(() => {
    const path = route.path  //获取当前路由的path
    if (path === '/home') {
        return 0
    } else if (path === '/order') {
        return 1
    } else if (path === '/message') {
        return 2
    } else if (path === '/my') {
        return 3
    } else {
        return 0
    }
})

//监听路由变化，更新active值
// onMounted(() => {
//     const unwatch = router.afterEach((to) => {
//         active.value = activeIndex.value
//     })
//     onUnmounted(() => {
//         unwatch()
//     })

onMounted(() => {
  //监听路由变化，更新active值
  // const unwatch = router.afterEach((to) => {
  //       active.value = activeIndex.value
  //   })
  //   onUnmounted(() => {
  //       unwatch()
  //   })
    //每次进来页面进行active的初始化取值
    // active.value = Number(localStorage.getItem('active')) || 0
    active.value = activeIndex.value || 0

})

// 为什么不能直接写 function itemClick()
//会导致报错。这是因为 <script setup> 模式中不能将 function 声明的代码引入到模板或响应式上下文中。
 //方法一： 使用类型声明的方式来定义函数
// const itemClick:(num:number,path:string)=>void = (num,path)=>{
//    //简化代码
//     if(userStore.token){
//         router.push(path)
        
//     }else {
//         router.push('/login')
//     }

//     localStorage.setItem('active',String(num))  //修改 新增    
// }

//方法二：使用箭头函数：
// const itemClick = (num: number, path: string) => {
//     if (userStore.token) {
//         router.push(path);
//     } else {
//         router.push('/login');
//     }
//     localStorage.setItem('active',String(num))  //修改 新增   
// };

//方法三：使用function声明的方式来定义函数
//这样写有bug，如果是从首页进到详情页面再跳转到比如订单页面，返回的active是0，不是1  用router-link跳转可以解决这个问题

//这种写法有bug   结合上面的监听计算属性写法  路由变化  active值的修改  就可以解决这个问题
function itemClick(num: number, path: string){
    if (userStore.token || path == '/order' || path== '/home') {
        router.push(path);
    } 
    else {
        router.push('/login');
    }
    localStorage.setItem('active',String(num))  //修改 新增 
}
</script>
<template>
      <footer class="footer">
      <!-- 这里没有用router-link跳转 
       用标签的to属性跳转也可以 详情页返回到订单时下面订单也要自动选中 bus emit on事件   my的也买你刷新后footer没有默认选中我的
       问题可能是没有用router-link跳转
       标签栏组件 <router-link>首页</router-link>  再嵌入一层router-link  -->
  <van-tabbar v-model="active" active-color="#ee0a24">
  <van-tabbar-item @click="itemClick(0,'/home')"  :icon="active == 0 ? 'wap-home' : 'wap-home-o'">首页</van-tabbar-item>
  <van-tabbar-item @click="itemClick(1,'/order')"  icon="orders-o">订单</van-tabbar-item>
  <van-tabbar-item @click="itemClick(2,'/message')"   icon="friends-o" dot>消息</van-tabbar-item>
  <van-tabbar-item @click="itemClick(3,'/my')"   icon="setting-o">{{ userStore.token? '我的':'未登陆' }}</van-tabbar-item>
  <!-- <van-tabbar-item @click.stop="itemClick(0,'/home')"  :icon="active == 0 ? 'wap-home' : 'wap-home-o'">首页</van-tabbar-item>
  <van-tabbar-item @click.stop="itemClick(1,'/order')"  icon="orders-o">订单</van-tabbar-item>
  <van-tabbar-item @click.stop="itemClick(2,'/message')"   icon="friends-o" dot>消息</van-tabbar-item>
  <van-tabbar-item @click.stop="itemClick(3,'/my')"   icon="setting-o">{{ userStore.token? '我的':'未登陆' }}</van-tabbar-item> -->
  <!-- <van-tabbar-item @click.stop="itemClick(3,'/my')"  :to="userStore.token ? '/cart' : '/login' " icon="setting-o">{{ userStore.token? '我的':'未登陆' }}</van-tabbar-item> -->
</van-tabbar>

<!-- <router-link to="/home">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind">
        <span class="iconfont icon-dingdan"></span>
        <p>订单</p>
      </router-link>
      <router-link :to="userInfo.token ? '/cart' : '/login' ">

        <van-tabbar-item replace :to="userStore.token?'/message':'/login'" icon="friends-o" dot>消息</van-tabbar-item>
        <p>消息</p>
      </router-link>  
      <router-link to="/my">
        <span class="iconfont icon-My"></span>
        <p>我的</p>
      </router-link> -->

    </footer>
</template>

<style lang="scss" scoped>
.footer{
  height: 0.5rem;//50px;  50px/100vm * 100 = 50px   50px/100vm = 0.5rem？
  font-size: 12px;    //根据设计搞的最多的字体大小
  display: flex;
  justify-content: space-evenly;
  // align-items: 
  align-content: center;

  a{   //router-link
      // flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      text-decoration: none;
      box-sizing:border-box;
      padding: 4px 0;

      color: black;

      -webkit-tap-highlight-color: rgba(0,0,0,0) ;//transpatent; //rgba(0,0,0,0)  
      //止高亮效果，可以将它设置为透明，如您代码中所示的 rgba(0,0,0,0)。这种方法可以提升用户在触摸设备上体验，特别是在不希望高亮干扰视觉效果的情况下

    p{
      // padding-bottom: 5px;
      position: relative;
      bottom: 5px;
    }
    
}
//此处类与a标签同级
.router-link-active{
       color: red;
    }  
}
</style>